<template>
  <div class="root">
    <Child title="aaaa" @handleClick="handleClick"></Child>
  </div>
</template>

<script>
import { provide, reactive, watch } from 'vue';
import Child from "./Child.vue";
export default {
  components: {
    Child,
  },
  setup() {
    const data = reactive({
      name:'mikaisa',
      age:18
    });

    // VCA中provide很简单，直接从vue中引入，然后像我这样使用就好了。还记得我们当时说provide的缺点吗，就是你传过去的数据，没有办法同步，你在子孙组件中inject拿到的只是个复制的替代品，但是在VCA的ref和reactive下的数据，是可以做到同步的，也就是说，你在子孙组件中修改了数据，这里也会同步被修改
    provide('data',data);

    // 不信我们弄个watch试下
    watch(data,()=>{
      console.log('父组件中的data被修改了');
    })

    const handleClick = (param) => {
      console.log(param);
    };

    return {
      handleClick,
    };
  },
};
</script>

<style scoped>
</style>

<style>
* {
  margin: 0;
  padding: 0;
}
</style>
